<script setup>
const meitiShow = ref(false);
</script>

<template>
  <Banner />
  <div class="message-box">
    <div class="message">
      <div class="message-item">
        <img src="@/assets/images/media1.png" alt="" /><span>厦门国际商会</span>
      </div>
      <div class="message-item">
        <img src="@/assets/images/media2.png" alt="" /><span
          >媒体合作 陈女士</span
        >
      </div>
      <div class="message-item">
        <img src="@/assets/images/media3.png" alt="" /><span>13163906601</span>
      </div>
      <div class="message-item">
        <img src="@/assets/images/media4.png" alt="" /><span>0596-2270270</span>
      </div>
    </div>
  </div>
  <div class="bot-img">
    <img src="@/assets/images/bottom.png" alt="" />
  </div>
  <div class="media-box mr-b-80">
    <img style="width: 100%" src="@/assets/images/meiti.jpg" alt="" />
    <div class="exhi-more">
      <a @click.prevent="meitiShow = !meitiShow">{{
        meitiShow ? "收起" : "查看更多"
      }}</a>
    </div>
    <Transition>
      <img
        v-if="meitiShow"
        style="width: 100%; margin-top: 3vw"
        src="@/assets/images/meiti2.jpg"
        alt=""
      />
    </Transition>
  </div>
</template>
<style scoped>
body {
  background-color: #fff;
}

.message-box {
  margin: 4.583vw auto;
  padding: 2.083vw;
  border: 0.052vw solid rgba(228, 228, 228);
  width: 26.042vw;
}

.message {
  box-shadow: 0vw 0.26vw 1.042vw 0vw rgba(0, 0, 0, 0.1);
  padding: 2.76vw 0;
  text-align: center;
  padding-left: 6.094vw;
}

.message-item {
  display: flex;
  align-items: center;
  font-size: 1.042vw;
  margin-bottom: 1.198vw;
}

.message-item:last-child {
  margin: 0;
}

.message-item img {
  width: 1.25vw;
  margin-right: 1.979vw;
}

.bot-img {
  margin: 4.583vw auto;
  width: 2.813vw;
}

.bot-img img {
  width: 100%;
}

.media-box {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 2.8vw;
}
.exhi-more {
  font-size: 1.042vw;
  text-align: center;
  margin-top: 3vw;
}
.exhi-more a {
  cursor: pointer;
  color: #ff6400;
}
@media (max-width: 768px) {
  .message-item img {
    width: 3.2vw;
    margin-right: 1.979vw;
  }
  .message {
    padding-left: 18vw;
  }
  .bot-img {
    width: 9vw;
  }
  .message-item {
    font-size: 2.667vw;
  }
  .message-box {
    width: 60%;
  }
  .exhi-more {
    font-size: 3vw;
  }
}
</style>
